<template>
  <!--高端信托列表模块-->
  <div class="high_end_list_module_wrap">
    <div :class="['high_end_list_module', listWrapClass]">
      <div class="module_title_wrap">
        <div class="title">
          {{ title }}
          <div class="sub_title" v-if="subTitle">{{ subTitle }}</div>
        </div>
      </div>
      <ul class="list_wrap">
        <li
          class="li_item flex"
          v-for="item in dataList"
          :key="item.productId">
          <div class="module_item_content" @click="toHEfundDetail(item)">
            <p class="product_name ellipsis-2">{{ item.prodName }}</p>
            <div>
              <span class="code">{{ item.prodCode }}</span>
              <span :class="['product_tags']" v-if="item.tagList.length > 0">
                <span class="product_tag" v-for="(tag, index) in item.tagList" :key="index">{{ tag }}</span>
              </span>
            </div>
            <div class="product_status">
                <div
                  class="status_content"
                  :class="item.prodOpenClass"
                >{{ prodOpenText(item) }}</div>
              </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ProductLeft from '@/components/listModule/productLeft.vue';
import ProductRight from '@/components/listModule/productRight.vue';
import tracking from '@/utils/tracking.js';

export default {
  name: 'HighEndListModule',
  mixins: [
    tracking
  ],
  props: ['listWrapClass', 'title', 'subTitle', 'dataList'],
  components: {
  },
  methods: {
    prodOpenText(item) {
      if (item.prodOpenClass == 'pre-open') {
        return '即将开放';
      }
      if (item.prodOpenClass == 'open') {
        return '开放购买';
      }
      return '';
    },
    toHEfundDetail(item) {
      // TD埋点 CNZZ埋点
      this.buryEventPoint('H5-GDLCLM-EVENT', this.title);
      this.buryEventPointCNZZ('H5-GDLCLM-EVENT', this.title);

      this.$router.push({
        path: `${this.global.publicPath}/HEFund/detail`,
        query: { prodCode: item.prodCode }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/*高端产品列表模块*/
.high_end_list_module_wrap{
  padding-bottom: 20px;
  .high_end_list_module {
    background-color: #5b1212;
    border-radius: 4px;
    color: #333;
    font-size: 15px;
    .module_title_wrap {
      color: #fff;
      background-image: url("../assets/images/jubaopen_gaoduan_list_bg@2x.png");
      .sub_title {
        color: #ecddc7;
      }
    }
    .list_wrap {
      padding: 0 10px 10px 10px;
      .li_item {
        position: relative;
        margin-bottom: 10px;
        background-image: linear-gradient(269deg, #fff 0%, #fff5e6 100%);
        border-radius: 4px;
        .module_item_content {
          padding-right: 60px;
          overflow: hidden;
          background-image: url("../assets/images/jubaopen_gaoduan_box_bg@2x.png");
          background-size: cover;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;
          min-height: 80px;
          border-radius: 4px;
          .rise {
            color: #b37012;
          }
          .sub_text {
            margin-top: 10px;
            color: #666;
          }
          .product_name{
            font-weight: bold;
          }
          .code{
            font-size: 12px;
            color: #999;
            margin-right: 8px;
          }
          .product_tags {
            color: #bc8c45;
            display: inline-block;
            .product_tag {
              border-color: #f0dec7;
            }
          }
        }
        .product_status {
          width: 80px;
          line-height: 20px;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 11px;
          color: #333;
          letter-spacing: 0.48px;
          text-align: center;
          .status_content {
            transform: translate(30%, -100%) rotate(45deg);
            transform-origin: left bottom;
          }
          .pre-open {
            background-image: linear-gradient(269deg, #cea76e 0%, #ffeacc 100%);
          }
          .open {
            background-image: linear-gradient(269deg, #ff7f66 0%, #ffccb3 100%);
          }
        }
      }
    }
  }
}
</style>